<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">主页</el-breadcrumb-item>
      <el-breadcrumb-item>管理</el-breadcrumb-item>
      <el-breadcrumb-item>列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->

    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="选择日期">
          <el-date-picker v-model="formInline.data" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"> </el-date-picker>
        </el-form-item>
        <el-form-item label="主场队伍">
          <el-input v-model="formInline.zhudui" placeholder="请输入主场队伍"></el-input>
        </el-form-item>
        <el-form-item label="客场队伍">
          <el-input v-model="formInline.kedui" placeholder="请输入客场队伍"></el-input>
        </el-form-item>

        <el-popover placement="bottom" title="筛选列" trigger="click" width="40">
          <el-checkbox-group v-model="checkedColumns" size="mini">
            <el-checkbox v-for="item in checkBoxGroup" :key="item" :label="item" :value="item"></el-checkbox>
          </el-checkbox-group>
        </el-popover>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>

      <!-- 订单列表数据 -->
      <el-table :data="matchList" border stripe row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column prop="matchId" label="序号" align="center"></el-table-column>

        <el-table-column label="比赛类型" prop="matchType" width="80px" align="center" @cell-dblclick="tableDbEdit">
          <!-- <template slot-scope="scope" v-if="scope.row.matchType">
               <el-input v-model="scope.row.matchType" placeholder="请输入内容" @blur="searchData(scope.row)" @keyup.enter.native="$event.target .blur()"></el-input>
           </template> -->
        </el-table-column>
        <el-table-column label="比赛时间" prop="data" width="90px" align="center"></el-table-column>
        <el-table-column label="具体时间" prop="dataHours" width="69px" align="center"></el-table-column>
        <el-table-column label="主队名称" prop="zhudui" width="100px" align="center"></el-table-column>
        <el-table-column label="客队名称" prop="kedui" width="100px" align="center"></el-table-column>
        <el-table-column label="比分" prop="score" width="45px" align="center"></el-table-column>

        <el-table-column prop="grade" label="亚盘数据" align="center">
          <el-table-column prop="h_name" label="名称" align="center" width="80px"></el-table-column>
          <el-table-column prop="hzhu" label="主" align="center" width="70px">
            <!-- //用插槽的方法来改变颜色! -->
            <template slot-scope="scope">
              <div :style="{ color: scope.row.hzhu ? '#1a1aff' : '#1a1aff' }">
                {{ scope.row.hzhu }}
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="hping" label="盘" align="center">
            <!-- //用插槽的方法来改变颜色! -->
            <template slot-scope="scope">
              <div :style="{ color: scope.row.hping ? '#1a1aff' : '#1a1aff' }">
                {{ scope.row.hping }}
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="hke" label="客" align="center" width="70px">
            <!-- //用插槽的方法来改变颜色! -->
            <template slot-scope="scope">
              <div :style="{ color: scope.row.hke ? '#1a1aff' : '#1a1aff' }">
                {{ scope.row.hke }}
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="newZhu" label="最新主" align="center" width="70px">
            <!-- //用插槽的方法来改变颜色! -->
            <template slot-scope="scope">
              <div :style="{ color: scope.row.newZhu ? '#ff8000' : '#ff8000' }">
                {{ scope.row.newZhu }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="newPing" label="最新盘" align="center">
            <!-- //用插槽的方法来改变颜色! -->
            <template slot-scope="scope">
              <div :style="{ color: scope.row.newPing ? '#ff8000' : '#ff8000' }">
                {{ scope.row.newPing }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="newKe" label="最新客" align="center" width="70px">
            <!-- //用插槽的方法来改变颜色! -->
            <template slot-scope="scope">
              <div :style="{ color: scope.row.newKe ? '#ff8000' : '#ff8000' }">
                {{ scope.row.newKe }}
              </div>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column prop="grade" label="竞增数" align="center">
          <el-table-column prop="jz" label="主" align="center" width="50px">
            <!-- //用插槽的方法来改变颜色! -->
            <template slot-scope="scope">
              <div :style="{ color: scope.row.jz > 60 ? '#FF0000' : scope.row.jz < 0 ? '#0015FF' : '' }">
                {{ scope.row.jz }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="jp" label="平" align="center" width="50px">
            <!-- //用插槽的方法来改变颜色! -->
            <template slot-scope="scope">
              <div :style="{ color: scope.row.jp > 60 ? '#FF0000' : scope.row.jp < 0 ? '#0015FF' : '' }">
                {{ scope.row.jp }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="jk" label="客" align="center" width="50px">
            <!-- //用插槽的方法来改变颜色! -->
            <template slot-scope="scope">
              <div :style="{ color: scope.row.jk > 60 ? '#FF0000' : scope.row.jk < 0 ? '#0015FF' : '' }">
                {{ scope.row.jk }}
              </div>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="统计(竞皇)" prop="tj1" width="80px" align="center">
          <template slot-scope="scope" v-if="scope.row.matchType">
            <el-input type="number" v-model="scope.row.tj1" placeholder="请输入" @blur="searchData(scope.row)" @keyup.enter.native="$event.target.blur()"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="统计(竞马)" prop="tj2" width="80px" align="center">
          <template slot-scope="scope" v-if="scope.row.matchType">
            <el-input type="number" v-model="scope.row.tj2" placeholder="请输入" @blur="searchData(scope.row)" @keyup.enter.native="$event.target.blur()"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="统计(竞皇马)" prop="tj3" width="80px" align="center">
          <template slot-scope="scope" v-if="scope.row.matchType">
            <el-input type="number" v-model="scope.row.tj3" placeholder="请输入" @blur="searchData(scope.row)" @keyup.enter.native="$event.target.blur()"></el-input>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope" v-if="!scope.row.h_name">
            <el-button size="mini" type="primary" @click="toDetail(scope.row.matchId)">分析</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 10, 20]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 展示物流进度的对话框 -->
    <el-dialog title="物流进度" :visible.sync="progressVisible" width="50%">
      <!-- 时间线 -->
      <el-timeline>
        <el-timeline-item v-for="(activity, index) in progressInfo" :key="index" :timestamp="activity.time">
          {{ activity.context }}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      b: '',
      // 多选框的列表，列出表格的每一列
      checkBoxGroup: ['99家平均', '竞彩官方', '皇冠', '香港马会'],
      checkedColumns: [],
      a: false,
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      total: 0,
      matchList: [],
      addressForm: {
        address1: [],
        address2: ''
      },
      progressVisible: false,
      progressInfo: [],
      formInline: {}
    }
  },
  created() {
    this.getMatchList()
  },
  methods: {
    async searchData(row) {
      console.log(row)
      const { data: res } = await this.$http.post(`/updateMatch`, {
        ...row
      })
      if (res.success) {
        return this.$message.success(res.message)
      }
    },

    onSubmit() {
      console.log(this.formInline)
      console.log('submit!')
      this.queryInfo.pagenum = 1
      this.getMatchList()
    },
    async getMatchList() {
      const page = this.queryInfo.pagenum
      const limit = this.queryInfo.pagesize
      const { data: res } = await this.$http.post(`/pageList/${page}/${limit}`, {
        ...this.formInline
      })
      // console.log(res)

      if (!res.success) {
        return this.$message.error('获取列表失败！')
      }

      this.total = res.data.total
      this.matchList = res.data.rows
    },
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getMatchList()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getMatchList()
    },
    // 展示修改地址的对话框
    showBox() {
      this.addressVisible = true
    },
    toDetail(matchId) {
      console.log(matchId)
      this.$router.push(`/match/detail/${matchId}`)
    },
    tableDbEdit(row, column, cell, event) {
      console.log(row, column, cell, event)
      if (column.label != '顺序') {
        event.target.innerHTML = ''
        let cellInput = document.createElement('input')
        cellInput.value = ''
        cellInput.setAttribute('type', 'text')
        cellInput.style.width = '80%'
        cell.appendChild(cellInput)
        cellInput.onblur = function() {
          cell.removeChild(cellInput)
          event.target.innerHTML = cellInput.value
        }
      }
    }
  }
}
</script>

<style>
input::-webkit-input-placeholder {
  color: rebeccapurple;
}
.el-cascader {
  width: 100%;
}
</style>
